<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>012_事件的绑定</title>
</head>
<body>
    <button id="btn">点我一下</button>

    <button id="btn02">点我以下你试试</button>

<script type="text/javascript">
    /**
     * 使用 对象.事件 = 函数的形式绑定响应函数，它只能为同时为一个元素的一个事件绑定一个响应函数，不能同时绑定多个，如果绑定了多个，则后面会覆盖掉前面
     *
     * addEventListener(); 通过这个方法可以为元素绑定响应函数
     * 参数：
     *  1. 事件的字符串：'click' 不要on
     *  2. 回调函数：当事件触发时，该函数会被调用
     *  3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
     *
     *  使用addEventListener();可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
     *  该方法不支持IE8及以下的浏览器，在IE8中可以使用attachEvent();
     *
     *  attachEvent();
     *  参数：
     *    1. 事件的字符串：'onclick' 要on
     *    2. 回调函数
     *
     *  这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener();相反
     *
     */

    var btn = document.getElementById("btn");
    btn.addEventListener('click', function () {
        alert("hello");
    }, false);
    btn.addEventListener('click', function () {
        alert("world");
    }, false);
   /* btn.attachEvent('onclick', function () {
        alert('ww');
    });*/

    /**
     * 定义一个函数，用来为指定元素绑定响应函数
     *
     * 参数：
     *  obj 要绑定事件的对象
     *  eventStr 事件的字符串
     *  callback 回调函数
     *
     *  addEventListener();中的this，是绑定事件的对象
     *  attachEvent();中的this，是window
     *  这两个方法的this需要统一
     */
    
    function bind(obj, eventStr, callback) {

        // 大部分浏览器兼容的方式
        if(obj.addEventListener) {
            obj.addEventListener(eventStr, callback, false);
        } else { // IE8及以下的浏览器兼容的方式

            /**
             * this是由谁调用的方式决定
             * callback.call(obj)
             *
             * if 中的this指向的是obj，而else中的this指向的则是window，需要将else中的this改变以下
             * */
            obj.attachEvent("on"+eventStr, function () {
                callback.call(obj);
            });
        }
    }

    bind(document.getElementById("btn02"), 'click', function () {
        alert("hello world");
    });
</script>
</body>
</html>